<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <cpn2></cpn2>
</div>
<script>
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是cpnC1</h2>
        <p>我是内容</p>
      </div>
    `
  })
  // 2.创建第二个组件
  const cpnC2 = Vue.extend({
    template: `
      <div>
      <h2>我是cpnC2</h2>
      <p>我是内容</p>
      <cpn1></cpn1>
      </div>
    `,
    components: {
      cpn1: cpnC1
    }
  })
  //可以看成根组件
  const app = new Vue({
    el: "#app",
    data: {},
    components: {
      cpn2: cpnC2
    }
  })
</script>
</body>
</html>
